
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.4/css/layui.css" media="all">
  <script src="https://www.layuicdn.com/layui-v2.5.4/layui.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <style type="text/css">
  .layui-nav{background-color:#009688;height:60px;width:100%;}
  .layui-row{height: 100%;}
   .layui-col-md3{height: 100%;}
      .layui-header{width:100%;height:110px;}

      .layui-nav-item{color:black;}
      .header-nav{width:90%;height:100%;margin: auto;}
     .layui-footer{background-color: red;width:100%;height:550px;}
     .image{width:100px;height:100px;}
     #footer{width:100%;height:300px;height:30%;border-top:1px solid black;}
  .footer-right{
      padding-left: 200px;
      float: left;
  }
  .footer-left{
      padding-left: 200px;
      float: left;
  }
  .word{text-align:center;color:red;padding-top:30px;font-size:18px;}
      .li{margin-left:10px;font-size:20px;font-weight:bold;float:right;margin-top:45px;}
  </style>

    <script type="text/javascript">
        layui.use('element', function(){
            var element = layui.element;
            //一些事件触发
            element.on('tab(demo)', function(data){
                console.log(data);
            });
        });
        layui.use('carousel', function(){
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,height:'100%'
                ,interval:'1900'
                ,arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
        });
    </script>
</head>
<body>
<div class="layui-layout">
 <div class="layui-nav">
     <div class="layui-row">
         <div class="layui-col-md9">
            <p style="color:#ffffff;font-size: 30px;font-weight:bold;font-style:italic;">欢迎您,生活愉快</p>
         </div>
         <div class="layui-col-md3">
             <ul class="layui-nav layui-bg-molv" lay-filter="">
                 <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/tologin">登录</a></li>
                 <li class="layui-nav-item layui-this"><a href="">中文</a></li>
                 <li class="layui-nav-item"><a href="">English</a></li>
                 <li class="layui-nav-item">
                     <a href="javascript:;">网站问题</a>
                     <dl class="layui-nav-child"> <!-- 二级菜单 -->
                         <dd><a href="">电话咨询</a></dd>
                         <dd><a href="">后台服务</a></dd>
                         <dd><a href="">医院平台</a></dd>
                     </dl>
                 </li>
                 <li class="layui-nav-item"><a href="">管理版</a></li>
             </ul>
         </div>
 </div>
 </div>
        <div class="layui-header">
          <div class="header-nav">
            <div class="row">
                <div class="col-md-4" class="form-inline">
                    <img src="pic/yiliao.jpg" class="image" >
                    <span style="font-size:20px;color:#1E9FFF;font-weight:bold;" >海南医学院第二医院</span>
                    <span style="font-size:10px;color:#1E9FFF;font-weight:bold;font-style:italic;">
                        The second hospital of Hainan Medical College
                    </span>
                </div>
                <div class="col-md-8" class="form-inline">
                    <ul style="width:100%;height:100px;" class="ul">
                        <li class="li"><a href="#">公告 |</a></li>
                        <li class="li"><a href="#">医院概况 |</a></li>
                        <li class="li"><a href="#">就业指南 |</a></li>
                        <li class="li"><a href="#">科研教学 |</a></li>
                        <li class="li"><a href="#">护理天地 |</a></li>
                        <li class="li"><a href="#">党建群团 |</a></li>
                        <li class="li"><a href="#">交流合作 |</a></li>
                        <li class="li"><a href="#" style="color:#1E9FFF">首页 |</a></li>
                    </ul>
                </div>
            </div>
          </div>
        </div>
    <div class="layui-footer">
        <div class="layui-carousel" id="test1">
            <div carousel-item>
                <div><img src="pic/yiliao1.jpg" style="height: 100%;width: 100%;"></div>
                <div><img src="pic/yiliao2.jpg " style="height: 100%;width: 100%;"></div>
                <div><img src="pic/yiliao3.jpg " style="height: 100%;width: 100%;"></div>
                <div><img src="pic/yiliao4.jpg " style="height: 100%;width: 100%;"></div>
                <div><img src="pic/yiliao5.jpg " style="height: 100%;width: 100%;"></div>
            </div>
        </div>
    </div>
    <div id="footer">
        <div class="footer-left" >
            <p class="word">医院地址：海南省海口市龙华区椰海大道368号</p>
            <p class="word">关注微信公众平台</p>
            <p class="word">关注医院最新动态</p>

        </div>
        <div class="footer-right">
            <p>扫码关注医院微信</p>
            <img height="120px" width="120px" src="https://cdn.hillxu.com/pic/20201112224133.png">
        </div>
        <div class="footer-right">
            <p>扫码关注网上挂号微信</p>
            <img height="120px" width="120px" src="https://cdn.hillxu.com/pic/20201112224133.png">
        </div>

    </div>
</div>
</div>
</body>
</html>